<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - GAME REVIEW HUB</title>
    {% load staticfiles %}

    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <link rel="stylesheet" href="{% static 'auth.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <h1>GAME REVIEW HUB</h1>
            </div>
            <nav class="nav">
                <a href="{% url 'users:login' %}" class="nav-item">首页</a>
                <a href="{% static 'games.html' %}" class="nav-item">游戏</a>
                <a href="{% static 'reviews.html' %}" class="nav-item">测评</a>
            </nav>
        </header>

        <main class="auth-container">
            <div class="auth-form register-form">
                <h2>创建账号</h2>
                <form id="registerForm" method="POST">
                    {% csrf_token %}
{#                    <div class="form-group">#}
{#                        <input type="text" name="username" placeholder="用户名" required>#}
{#                    </div>#}
                    <div class="form-group">
                        <div class="phone-input">
                            <input type="text" name="mobile" placeholder="请输入手机号" autofocus="autofocus" required
                                   id="id_login" class="form-control" v-model="mobile" >
                            <button type="button" class="verify-btn" @click="send_sms_code">发送验证码</button>
                        </div>
{#                         <small class="form-text text-muted ml-1" v-show="mobile_error" >[[mobile_error_message]]</small>#}
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="密码" required v-model="password" @blur="check_password">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password2" placeholder="确认密码" required v-model="password2" @blur="check_password2">
                    </div>

                    <div class="form-group">
                        <input type="text" name="sms_code" placeholder="短信验证码" required v-model="sms_code" @blur="check_sms_code">
                    </div>
                    <div class="form-group">
                        <div class="captcha-input">
                            <input type="text" name="imgage_code" placeholder="请输入图片验证码" required  class="form-control" v-model="image_code" @blur="check_image_code"/>
                            <img :src="image_code_url" @click="generate_image_code" alt="" class="captcha-img">
                        </div>
                    </div>
                    <div class="form-options">
                        <label>
                            <input type="checkbox" name="agreement" required>
                            <span>我同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a></span>
                        </label>
                    </div>
                    <button type="submit" class="submit-btn" @click="on_submit">注册</button>
{#                    <div class="switch-auth">#}
{#                        已有账号？<a href="login.html">立即登录</a>#}
{#                    </div>#}
                </form>
            </div>
        </main>
    </div>
</body>
<script src="{% static 'js/vue-2.5.16.js' %}"></script>
<script src="{% static 'js/axios-0.18.0.min.js' %}"></script>
{#<script src="{% static 'auth.js' %}"></script>#}
<script src="{% static 'script.js' %}"></script>
<script src="{% static 'js/host.js' %}"></script>
<script src="{% static 'js/register.js' %}"></script>
</html>